<template>
  <el-card style="margin-right: 10px;margin-bottom: 10px;">
    <div slot="header"><span><i class="fa-solid fa-microchip" /> CPU</span></div>
    <div class="el-table w_100 el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition">
      <table cellspacing="0" style="width: 100%;">
        <thead>
          <tr>
            <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
            <td class="el-table__cell is-leaf"><div v-if="cpu" class="cell">{{ cpu.cpuNum }}</div></td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
            <td class="el-table__cell is-leaf"><div v-if="cpu" class="cell">{{ cpu.used }}%</div></td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
            <td class="el-table__cell is-leaf"><div v-if="cpu" class="cell">{{ cpu.sys }}%</div></td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
            <td class="el-table__cell is-leaf"><div v-if="cpu" class="cell">{{ cpu.free }}%</div></td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CPU',
  props: {
    cpu: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
